import {
  Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, Input, ElementRef,
  Renderer2
} from '@angular/core';

import {ActivatedRoute} from "@angular/router";
import {ImageServeService} from "app/shared/service/image/image-serve.service";

@Component({
  selector: 'slide-card',
  templateUrl: './slide-card.component.html',
  styleUrls: ['./slide-card.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SlideCardComponent implements OnInit {
  @Input() info;
  public dataStore = {
    bigCardIsShow: false,
    theme: {},
    linearGradient: '',
  };
  public themesStore = [{
    img: 'card_ordinary_gray.png',
    gradient: ['#d2d2d2', '#a1a1a1']
  }, {
    img: 'card_event_blue.png',
    gradient: ['#4292f3', '#1a65b8']
  }, {
    img: 'card_training_orange.png',
    gradient: ['#ffc857', '#fda112']
  }, {
    img: 'card_ticket_navy.png',
    gradient: ['#48839f', '#3e697e']
  }];
  public cardStatusStore = [{
    state: '',
    tip: '',
    color: '',
    icon: ''
  }, {
    state: '未激活',
    tip: '未激活',
    color: '#e94141',
    icon: 'spell_warning.png'
  }, {
    state: '可使用',
    tip: '已完成',
    color: '#70d77b',
    icon: 'pay_success.png'
  }, {
    state: '已完成',
    tip: '已完成',
    color: '#e94141',
    icon: 'pay_success.png'
  }, {
    state: '不可用',
    tip: '不可用',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    state: '已终止',
    tip: '已终止',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    state: '已冻结',
    tip: '已冻结',
    color: '#c1c1c1',
    icon: 'spell_warning.png'
  }];

  constructor(public imgService: ImageServeService,
              private renderer: Renderer2,
              private ele: ElementRef,
              private route: ActivatedRoute) {
  }

  /**
   * @description 根据服务类型设置不同背景
   * @author ouyqx-691
   * @date 2018/03/10
   */
  handleDifferentCardType() {
    const imgOpts = this.themesStore;
    const cardType = this.info.busType;
    for (let i = 0; i < imgOpts.length; i++) {
      const item = imgOpts[i];
      if (cardType === i) {
        this.dataStore.theme = {
          img: this.imgService.getImage('manage/' + item.img),
          background: `-webkit-linear-gradient(right top,${item.gradient[0]},${ item.gradient[1]})`
        };
      }
    }
  }

  queryEle(selector) {
    return this.ele.nativeElement.querySelector(selector);
  }

  /**
   * @description 设置容器高度
   * @author ouyqx-691
   * @date 2018/03/16
   */
  setCardContainerHeight(height) {
    const cardContainer = this.queryEle('.card-container');
    this.renderer.setStyle(cardContainer, 'height', `${ height}px`);
  }

  /**
   * @description 初始化卡容器高度
   * @author ouyqx-691
   * @date 2018/03/16
   */

  initSetCardContainerHeight() {
    const smallCard = this.queryEle('.small-card');
    if (smallCard) {
      this.setCardContainerHeight(smallCard.clientHeight);
    }
  }

  /**
   * @description 处理触摸事件
   * @author ouyqx-691
   * @date 2018/03/16
   */
  handleToucheMoveEvent() {
    const content = this.queryEle('#seed-scroll-content');
    if (content) {
      let startX, startY;
      this.renderer.listen(content, 'touchstart', (e) => {
        startX = e.changedTouches[0].pageX;
        startY = e.changedTouches[0].pageY;

      });
      this.renderer.listen(content, 'touchmove', (e) => {
        if (!this.dataStore.bigCardIsShow) {
          return;
        }
        const endX = e.changedTouches[0].pageX;
        const endY = e.changedTouches[0].pageY;
        // 获取滑动距离
        const distanceX = endX - startX;
        const distanceY = endY - startY;
        // 判断滑动方向
        // const scrollTop = content.scrollTop;
        if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
          this.handleCardDisplay();
        }
      });
    }
  }

  /**
   * @description 处理卡片展开收起
   * @author ouyqx-691
   * @date 2018/03/16
   */
  handleCardDisplay() {
    const smallCard = this.queryEle('.small-card');
    const bigCard = this.queryEle('.big-card');
    const cardSwitch = this.queryEle('.card-switch');
    const smallCardHeight = smallCard.clientHeight;  // 默认取小卡高度
    let finallyCardContainerHeight;
    if (this.dataStore.bigCardIsShow) {
      // 收起大卡片
      this.dataStore.bigCardIsShow = false;
      this.renderer.addClass(bigCard, 'big-card-out');
      this.renderer.addClass(smallCard, 'small-card-in');
      this.renderer.removeClass(cardSwitch, 'open');
      finallyCardContainerHeight = smallCardHeight;
    } else {
      // 展示大卡片
      this.dataStore.bigCardIsShow = true;
      this.handleToucheMoveEvent();
      this.renderer.addClass(bigCard, 'big-card-in');
      this.renderer.removeClass(bigCard, 'big-card-out');
      this.renderer.addClass(smallCard, 'small-card-out');
      this.renderer.removeClass(smallCard, 'small-card-in');
      this.renderer.addClass(cardSwitch, 'open');
      finallyCardContainerHeight = bigCard.clientHeight;
    }
    this.setCardContainerHeight(finallyCardContainerHeight);
  }

  ngOnInit() {
    this.handleDifferentCardType();
    this.initSetCardContainerHeight();
  }
}
